<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,viewport-fit=cover"/>
	<title>11</title>
</head>
<style>
	body{
		padding: 0;
		opacity: 0;
		margin:0 0 0 10px ;
		transition: all 1s ease;
	}
	ul {
		position: fixed;
		bottom: 0;
		width: 374px;
		background: red;
		padding: 10px 0;
	}
	li{
		width: 33.3%;
		text-align: center;
		float: left;
		list-style: none;
	}
	a {
		color: whitesmoke;
		text-decoration: none;
	}

</style>
<body>
<div>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci atque debitis doloribus enim eos error hic ipsum, minus necessitatibus neque, perferendis placeat porro quae reiciendis repellat tempore velit veritatis.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur cumque cupiditate eaque fuga laudantium nihil quas quo, reiciendis veniam. A ad eaque hic mollitia nobis nulla quibusdam quisquam sed!
</div>
<ul>
	<li><a href="11.html">我是1号</a></li>
	<li><a href="22.html">我是2号</a></li>
	<li><a href="33.html">我是3号</a></li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
    $(function () {
        $('body').css({'opacity': '1', 'margin-left': '0px'})
    })
</script>
</body>
</html>